iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 8
1

菜菜菜的 Vue 30天 - Day8

methods

繼上一章提到了 methods 的這個方法,我們會在裡面宣告 function 來做使用,function 就不多做解釋相信大家應該都有一定的認識哈哈。

就一樣直接來看一下怎麼使用囉~

計數器

好吧!! 我承認我老套!! 而且還食古不化!!

上一章使用過了,但是~

好啦好啦,開玩笑的我們就開始吧~

我們先來看一下前一章寫的程式碼:

<body>
    <div id="app">
        <button v-on:click="count += 1">add</button>
        <span>{{count}}</span>
    </div>
</body>
<script>
    const vm = new Vue({
      el: '#app',
      data: {
        count: 0
      }
    })
</script>

跟 data 一樣在 Vue 實例裡面加上一個 methods,這樣我們就能在 methods 裡面撰寫 function。

那在寫 function 的時候要注意一點,一定要用 function(){} 的方式,這樣子裡面使用 this 才會指向 Vue 實例,不要使用箭頭函式(arrow function)因為這樣 this 就不會是指向 Vue 實例,就會沒辦法取到 Vue 實例其他的方法。

這次我們就把 methods 加上去吧~

<body>
    <div id="app">
        <button v-on:click="addCount">add</button>
        <span>{{count}}</span>
    </div>
</body>
<script>
    const vm = new Vue({
      el: '#app',
      data: {
        count: 0
      },
      methods: {
        addCount: function(){
            this.count += 1;
        }
      }
    })
</script>

另外如果需要傳入參數的話如下:

<button v-on:click="addCount(something)">add</button>   //如果要傳入參數就再加上(argument)

addCount: function(argument){   // 將參數傳入
    this.count += 1;
}

這樣也能達到一樣的效果。

另外 function 的寫法也能夠寫成以下這樣:

<script>
    const vm = new Vue({
      el: '#app',
      methods: {
        addCount(){
            this.count += 1;
        }
      }
    })
</script>

還有還有~~~(囉不囉唆啊!!)

我們在一個 function 裡面也能夠再去呼叫其他的 function 執行喲~

<script>
    const vm = new Vue({
      el: '#app',
      methods: {
        addCount(){
            this.count += 1;
            this.doubleCount();
        },
        doubleCount(){
            this.count = this.count * 2;
        }
      }
    })
</script>

雖然是在亂寫哈哈哈哈哈哈,但是想要表達的是 Vue methods 裡的 function 還能夠去呼叫其他的 function。

接下來的就下一章繼續介紹囉~


上一篇
event handler
下一篇
computed
系列文
菜菜菜的 Vue 30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言